import React, { useState } from 'react';
import LogViewer from './components/LogViewer';
import './App.css';

function App() {
  const [taskCode, setTaskCode] = useState('task001');
  const [trainCode, setTrainCode] = useState('train001');

  return (
    <div className="App">
      <header className="App-header">
        <h1>AI训练日志系统</h1>
      </header>
      <main>
        <div className="control-panel">
          <div className="form-group">
            <label htmlFor="taskCode">任务代码:</label>
            <input 
              type="text" 
              id="taskCode" 
              value={taskCode} 
              onChange={(e) => setTaskCode(e.target.value)}
            />
          </div>
          <div className="form-group">
            <label htmlFor="trainCode">训练代码:</label>
            <input 
              type="text" 
              id="trainCode" 
              value={trainCode} 
              onChange={(e) => setTrainCode(e.target.value)}
            />
          </div>
        </div>
        <LogViewer taskCode={taskCode} trainCode={trainCode} />
      </main>
    </div>
  );
}

export default App;